<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单数据</title>
	</head>
	<body>
		<div id="app">
			<!-- 定义表单 练习form标签与vue对象形成数据绑定 -->
			<form action="http://www.baidu.com" >
				用户名: <input type="text" v-model="user.username"/><br />
				用户详情:<textarea v-model="user.info"></textarea>
				<br />
				
				<!-- 下拉框 -->
				<select name="book" v-model="user.book">
					<option value="哈利波特">哈利波特</option>
					<option value="霍比特人">霍比特人</option>
					<option value="魔戒">魔戒</option>
					<option value="活法">活法</option>
				</select>
				<br />
				
				<!-- 单选框 name的名称相同-->
				性别: <input type="radio" value="男" name="gender" v-model="user.gender"/>男
				     <input type="radio" value="女" name="gender" v-model="user.gender"/>女
				
				<br />
				<!-- 复选框 值有多个,接收时采用数组接收-->
				爱好:
					<input type="checkbox" name="hobby" value="吃" v-model="user.hobby" />吃
					<input type="checkbox" name="hobby" value="喝" v-model="user.hobby" />喝
					<input type="checkbox" name="hobby" value="玩" v-model="user.hobby" />玩
					<input type="checkbox" name="hobby" value="乐" v-model="user.hobby" />乐
				
				<!-- 阻止标签的默认行为 采用其他方式提交 -->
				<input type="submit" value="提交" @click.prevent="addForm" />
			</form>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app=new Vue({
				el:"#app",
				data:{
					user: {
						username: '',
						info: '',
						book: '',
						gender:'',
						hobby:[]
						
					}
				},
				methods:{
					addForm(){
						console.log("input标签:"+this.user.username)
						console.log("文本域标签:"+this.user.info)
						console.log("下拉框标签:"+this.user.book)
						console.log("单选框标签:"+this.user.gender)
						console.log("复选框标签:"+this.user.hobby)
					}
				}
			})
		</script>
	</body>
</html>
